<template>
	<view class="careing">
		<navBar :title="$t('nursing.information')"></navBar>
		<view class="w_90 bg_color_f select-box">
			{{deviceinfo.deviceName}}
		</view>

		<view class="main w_90 bg_color_f">
			<view class="inner">
				<view class="title font_size_32 color_3 text_center">{{deviceinfo.workModeName}}</view>
				<view class="time text_center">{{ workTimeFormatted }}</view>
				<view class="time2 text_center font_size_32">{{$t('home.remaining-time')}}</view>
				<view class="flex_2 text_center process-box">
					<view>蒸汽准备</view>
					<view>
						<uni-steps :options="list2" active-color="#AF9453" :active="active" direction="column" />
					</view>
				</view>
				<!-- <button type="primary" size="mini" style="margin: 30px 10px; width: 100px;" @click="changeStatus">改变状态</button> -->
				<view class="btn-border flex_1">
					<view class="btn-circular flex_1 font_size_32" @click="togglePause">{{isPaused?'暂停':'继续'}}</view>
				</view>
				<view class="btn-end text_center" @click="openTipsPopup">{{$t('home.btn-end')}}</view>
				<!-- <view class="tips">此设备正在运行，可在上方切换其他设备使用</view> -->
			</view>
		</view>

		<!-- 用户点击暂停弹窗	 -->
		<popup-tips ref="popupTips" @confirm="handleTipsConfirm"></popup-tips>

		<!-- 护理完成弹窗 -->
		<popup-success ref="popupSuccess" @confirm="handleSuccessConfirm"></popup-success>

	</view>
</template>

<script>
	import PopupTips from '@/componets/PopupTips.vue';
	import PopupSuccess from '@/componets/PopupSuccess.vue';
	import {
		setDeviceWorkStatus,
		updateIsFinish
	} from '@/api/home.js'
	import {
		deviceInfo,
		deviceList
	} from '@/api/device.js'

	export default {
		components: {
			PopupTips,
			PopupSuccess
		},
		data() {
			return {
				sn: '', //设备sn		
				active: 0, //当前蒸汽准备状态
				list2: [{
					title: '蒸汽准备',
					desc: '2018-11-11'
				}, {
					title: '蒸汽塑型',
					desc: '2018-11-12'
				}, {
					title: '轻柔烘干',
					desc: '2018-11-13'
				}, {
					title: '祛味除菌',
					desc: '2018-11-14'
				}],
				deviceinfo: {}, //设备信息				
				isPaused: true, // 初始状态为暂停
				workTime: 100, // 倒计时初始值（秒）
				deviceListArr: [], //设备列表
				workStatus: 0, //3是暂停 停止倒计时
				workTimeFormatted: null, //倒计时-时间显示
				timerWork: null,
				workMode: 15, // workMode>=15 去味 7-14：烘干
			}
		},
		computed: {
			buttonLabel() {
				return this.isPaused ? '暂停' : '继续';
			},
		},
		onLoad(options) {
			this.sn = options.sn;
			this.deviceInfo(options.sn); //获取设备信息
			this.getwork();
			console.log('this.sn==', this.sn)
		},
		onShow() {
			this.EnglistData();
		},
		onUnload() {
			clearInterval(this.timerWork);
			this.timerWork = null;
		},
		methods: {
			// 重新赋值
			EnglistData() {

				this.list2 = [{
					title: this.$t('Steam-preparation'),
					desc: '2018-11-11'
				}, {
					title: this.$t('Steam-molding'),
					desc: '2018-11-12'
				}, {
					title: this.$t('home.Gently-dry'),
					desc: '2018-11-13'
				}, {
					title: this.$t('home.Sterilization'),
					desc: '2018-11-14'
				}]
			},
			// 定时查询工作状态
			getwork() {
				clearInterval(this.timerWork)
				this.timerWork = setInterval(() => {
					this.deviceInfo(this.sn)
				}, 10000); // 每10秒更新一次
			},
			// 格式化倒计时时间，转换为分钟和秒
			workTimeFormattedata() {
				const hours = Math.floor(this.workTime / 3600);
				const minutes = Math.floor((this.workTime % 3600) / 60);
				const seconds = this.workTime % 60;
				this.workTimeFormatted =
					`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
			},
			// 切换工作状态
			togglePause() {
				// 2:工作中  3:暂停  4:工作完成
				if (this.isPaused) {
					// 如果当前是暂停状态，点击后发送2，并改变状态
					this.setDevicStatus(3);
				} else {
					// 如果当前是继续状态，点击后发送3，并改变状态
					this.setDevicStatus(2);
				}
				// 切换isPaused状态
				this.isPaused = !this.isPaused;
			},
			async setDevicStatus(status) {
				await setDeviceWorkStatus({
					sn: this.sn,
					status: status
				}).then((r) => {
					if (r.code == 0) {
						this.deviceInfo(this.sn);
						this.config.Toast('修改成功');
					}
				}).catch(err => {
					console.log('err==', err)
				})
			},
			// 搜索设备是否存在
			deviceInfo(sn) {
				let that = this;
				deviceInfo({
					sn: sn
				}).then((r) => {
					that.deviceinfo = r.data;
					that.active = that.deviceinfo.workPhase;
					that.workTime = that.deviceinfo.workTime;
					that.workStatus = that.deviceinfo.workStatus;
					that.workMode = that.deviceinfo.workMode;
					that.workTimeFormattedata();

					if (that.deviceinfo.workStatus == 3) {
						that.isPaused = false;
					}

					// isFinish==1 代表工作已完成
					if (that.deviceinfo.isFinish == 1) {
						that.$refs.popupSuccess.open();
						clearInterval(that.timerWork);
						that.timerWork = null;
					}
				}).catch((err) => {
					console.log('err==', err)
					// this.$refs.PopupError.open();
				})
			},
			// 用户点击终止
			openTipsPopup() {
				this.$refs.popupTips.open();
			},
			// 用户确认终止
			async handleTipsConfirm() {
				this.isPaused = false;
				await this.setDevicStatus(0); //状态0终止	
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/home/home'
					})
				}, 1000)
			},
			// 护理完成知道了
			handleSuccessConfirm() {
				updateIsFinish({
					sn: this.sn
				}).then((r) => {
					if (r.code == 0) {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}
				})
			},
			// 头部设备选项
			change(e) {
				console.log("e:", e);
			},

		},

	}
</script>

<style>
	.uni-select {
		border: none !important;
		height: 78rpx !important;
	}

	.uni-steps__column-circle {
		width: 20rpx !important;
		height: 20rpx !important;
	}

	.uniui-checkbox-filled:before {
		content: "\e665" !important;
		color: #AF9453;
		border: 1px solid #AF9453;
		border-radius: 50%;
		margin-left: 1px;
	}

	.uni-steps__column-desc {
		opacity: 0;
	}

	.uni-steps__column-text {
		border: none !important;
	}
</style>

<style lang="scss" scoped>
	.careing {
		padding-bottom: 20rpx;

		.select-box {
			border-radius: 15rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
		}

		.main {
			border-radius: 20rpx;
			margin-top: 22rpx;
			padding-bottom: 40rpx;

			.inner {
				.process-box {
					height: 370rpx;
					margin-bottom: 20rpx;
				}

				.title {
					box-sizing: border-box;
					padding-top: 85rpx;
					margin-bottom: 55rpx;
					font-weight: 500;
				}

				.time {
					color: $uni-theme-color;
					font-size: 90rpx;
				}

				.time2 {
					color: #c2c2c2;
					margin-bottom: 80rpx;
					margin-top: 10rpx;
				}
			}

			.btn-border {
				width: 172rpx;
				height: 172rpx;
				border-radius: 50%;
				border: 3rpx solid #AF9453;
				margin: auto;

				.btn-circular {
					width: 158rpx;
					height: 158rpx;
					background: #AF9453;
					border-radius: 50%;
					color: #FFFFFF;
				}
			}

			.btn-end {
				font-weight: 500;
				font-size: 32rpx;
				color: #AF9453;
				line-height: 36rpx;
				text-decoration-line: underline;
				margin-top: 30rpx;
				margin-bottom: 60rpx;
			}

			.tips {
				font-size: 26rpx;
				line-height: 39rpx;
				width: 80%;
				background: #f5f5f5;
				border-radius: 10rpx;
				border: 1px solid #f5f5f5;
				color: #AF9453;
				padding: 17rpx 30rpx;
				margin: auto;
			}
		}
	}
</style>